<template>
  <view class="add_achievementId">
    <scroll-view id="add_achievementId" scroll-y>
      <div class="bg-fff pd_l_30 pd_r_30">
        <u-form ref="uForm" :model="form">
          <u-form-item label="学校" label-width="170">
            <u-input v-model="form.schoolName" placeholder="请输入"/>
          </u-form-item>
          <u-form-item label="年级" label-width="170" right-icon="arrow-right">
            <view @click="bankShow = true">{{form.className || '请选择'}}</view>
            <u-select v-model="bankShow"
                      mode="single-column"
                      label-name="name"
                      value-name="id"
                      z-index="100000"
                      :list="classState" @confirm="actionSheetCallback"></u-select>
          </u-form-item>
        </u-form>
      </div>
      <div class="row cont-center pd_l_30 pd_r_30 pd_t_30 pd_b_30">
				<div class="font-28 col-999 flex-1">科目及成绩</div>
				<div class="font-28 col-1f476d text-cent add-btn" @click="genGrade">添加科目</div>
			</div>
      <div class="pd_l_30 pd_r_30 bg-fff mg_t_10">
      <view class="item_obj row" v-for="(item, index) in grade" :key="index">
        <view class="left" style="width: 35%; margin-right: 5%">
          <u-form-item label-width="0" right-icon="arrow-right">
            <view @click="itemClick(item, index)">{{item.subject || '请选择'}}</view>
             <u-select v-model="item.bankShow"
                      mode="single-column"
                      label-name="name"
                      value-name="id"
                       z-index="100000"
                      :list="kemuList" @confirm="actionSheetCallback1"></u-select>
          </u-form-item>
        </view>
        <view class="right flex-1">
          <u-form-item label-width="0">
            <u-input :clearable="false" type="number" v-model="item.score" placeholder="请输入分数"/>
            <view slot="right" class="row" style="align-items: center" @click="removeItem(index)">
              <u-icon name="close-circle-fill" size="50" color="#2A6AAA"></u-icon>
            </view>
          </u-form-item>
        </view>
      </view>
    </div>
    </scroll-view>
    <view class="bg-fff btn-container pd_t_19 pd_b_20" v-if="showBottom">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="save">保存</u-button>
    </view>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";
  import {THEME} from "../mixins/config";

  export default {
	  data() {
		  return {
			  customStyle: {
				  background: THEME.btn_active_bg_color,
				  padding: '0 30rpx'
			  },
        form: {
			  	className: '',
          schoolName: ''
        },
        classState: [],
        bankShow: false,
        kemuList: [],
        grade: [{
          bankShow: false,
        }],
        current_kemu_index: 0,
        editFlag: false
		  }
	  },

    onShow() {
      uni.$on('achievement_info', data => {
        if (data.list) {
          this.editFlag = true
          this.grade = data.list.grades
          this.form = data.list
          uni.setNavigationBarTitle({
            title: '编辑成绩'
          });
        }
      })
      this.getClassSubjectInfo()
    },

    onUnload() {
      // 移除监听事件
      uni.$off('achievement_info')
    },

    computed: {
      showBottom() {
        let ret = true
        if (this.bankShow) {
          ret = false
        }
        const bankShow = this.grade.filter(item => item.bankShow)
        if (bankShow.length) {
          ret = false
        }
        return ret
      }
    },

    methods: {
	  	save() {
	  		if (!this.form.schoolName) {
          TOAST('请填写学校');
          return false;
        }
	  		if (!this.form.className) {
          TOAST('请选择年级');
          return false;
        }
	  		var grade = JSON.parse(JSON.stringify(this.grade))
        let ret = true
        grade.forEach(item => {
        	if (!item.subject || !item.score) {
        		ret = false
          }
        })
        if (!ret) {
        	TOAST('请完善科目和成绩信息');
          return false;
        }
	  		var _grade = []
	  		grade.forEach(item => {
          _grade.push(item.subject + ':' + item.score)
        })
        var postData = {
          schoolName: this.form.schoolName,
          className: this.form.className,
          classId: this.form.classId,
          grade: _grade.join(',')
        }
	  		request({
          url: '/app/userCenter/saveSchoolGrade',
          method: 'post',
          data: this.form.id ? Object.assign(postData, {id: this.form.id}) : postData
        }).then(ret => {
          uni.showModal({
            title: '提示',
            content: '保存成功',
            showCancel: false,
            success: function (res) {
              uni.navigateBack()
            }
          });
        })
      },

	    getClassSubjectInfo: function () {
		    var that_ = this;
		    request({
			    url: '/app/base/getClassSubjectInfo'
		    }).then(ret => {
			    that_.classState = ret.data;
			    setTimeout(() => {
            if (that_.editFlag) {
              that_.setKemu()
            }
          }, 400)
		    })
	    },

	    actionSheetCallback(res) {
        this.form.className = res[0].label
        var subject = this.classState.filter(item=>item.name == res[0].label)[0]
        var subjects = subject.subjects
        this.form.classId = subject.id
        var arr = []
        subjects.forEach(item => {
          let obj = {
            name: item
          }
          arr.push(obj)
        })
        this.kemuList = arr
	    },

      setKemu() {
        var subject = this.classState.filter(item=>item.name == this.form.className)[0]
        var subjects = subject.subjects
        var arr = []
        subjects.forEach(item => {
          let obj = {
            name: item
          }
          arr.push(obj)
        })
        this.kemuList = arr
      },

      genGrade() {
       this.grade.push({
          bankShow: false,
       })
      },

      removeItem(index) {
	    	if (this.grade.length > 1) {
	    		this.grade.splice(index, 1)
        } else {
	    		TOAST('至少一个')
        }
      },
      actionSheetCallback1(res) {
	    	this.$set(this.grade[this.current_kemu_index], 'subject', res[0].label)
      },

      itemClick(item, index) {
	    	if (!this.kemuList.length) {
	    		TOAST("请先选择年级")
        } else {
	    	  this.current_kemu_index = index
	    		this.$set(this.grade[index], 'bankShow', true)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .add_achievementId {
    background: #f7f7f7;
    padding-bottom: 140upx;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    #add_achievementId {
      height: 100%;
      width: 100%;
    }
    .btn-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-left: 30upx;
      padding-right: 30upx;
      box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
      justify-content: space-around;
      z-index: 1;
    }
    .add-btn {
				width: 148upx;
				height: 54upx;
				line-height: 54upx;
				border: 1px solid #2A6AAA;
				border-radius: 27upx;
			}
  }
</style>
